<template>
  <div class="main_box">
    <CommonHeader title="重点考核指标"></CommonHeader>
    <div class="main_content">
      <div class="info_card">
        <div class="tit">
          <div class="name">
            {{ query.level == 0 ? formateName(query.name) : formateName(query.name) + '，您好' }}
          </div>
          <div class="tips" v-if="query.level == 0">您负责共{{ userInfo.quotaCount }}项重点指标</div>
        </div>
        <div class="info">
          <span v-if="query.level != 0">
            {{ query.level == 2 ? formateArea(selectArea) : query.areaName }}共涉及市委市政府重点考核指标
            <span class="bold">{{ userInfo.quotaCount }}</span>
            项
          </span>
        </div>
        <div class="content">
          <div class="left">
            <div>{{ userInfo.issueNo }}：</div>
            <div @click="toQuota('0')">
              <span class="card_prev">
                <span class="bold undeline">{{ userInfo.topThreeCount }}</span>
                项指标获得绿牌
              </span>
              <i class="card"></i>
            </div>
            <div @click="toQuota('1')">
              <span class="card_prev">
                <span class="bold undeline">{{ userInfo.lastThreeCount }}</span>
                项指标被赋红牌
              </span>
              <i class="card red"></i>
            </div>
          </div>
          <div class="right" v-if="query.level == 0">
            <div>所属区域：{{ query.areaName }}</div>
          </div>
          <div class="right" v-else>
            <div>管辖区域：{{ query.areaName }}</div>
          </div>
        </div>
      </div>
      <div class="nav_box">
        <div class="nav_item" @click="toQuota('')">
          <i class="icon nav3"></i>
          <div>重点指标排名</div>
        </div>
        <div class="nav_item" @click="toRedCard" v-if="query.level != 0">
          <i class="icon nav4"></i>
          <div>红/绿牌占比排名</div>
        </div>
        <div class="nav_item" @click="toFeedback">
          <i class="icon nav2"></i>
          <div>重点关注任务</div>
          <div class="tips" v-if="quotaNum > 0">{{ quotaNum }}</div>
        </div>
        <div class="nav_item" @click="toDeclare" v-if="query.level != 2">
          <i class="icon nav1"></i>
          <div>自主申报工作</div>
        </div>
      </div>
      <!-- <div class="person_quota" style="margin-top: 10px; color: #000">
        <div @click="toFeedback">
          以事找人：
          <span class="tit" style="color: #1989fa; text-decoration: underline">{{ 0 }}</span>
          次
        </div>
        <div @click="toFeedbackOk">
          已反馈：
          <span class="tit" style="color: #1989fa; text-decoration: underline">{{ 0 }}</span>
          次
        </div>
      </div> -->
      <div class="quota_tip">
        <div class="quota_tip_title">以事找人：</div>
        <div @click="toFeedback" class="quota_tip_sec">
          <img src="@/assets/image/green_tip.png" />
          <span class="tit" style="color: #5dc65e">{{ 0 }}</span>
          次
          <!-- <div class="up">
            <i class="icon"></i>
            {{ 2 }}
          </div> -->
        </div>
        <div class="quota_tip_underline"></div>
        <div @click="toFeedbackOk" class="quota_tip_sec">
          <img src="@/assets/image/red_tip.png" />
          <span class="tit" style="color: #ee143d">{{ 0 }}</span>
          次
          <div class="down">
            <i class="icon"></i>
            {{ 2 }}
          </div>
        </div>
      </div>
      <div class="common_title flex-around">
        <div class="tit" style="height: 32px; line-height: 32px">重点指标</div>
        <div class="input_box">
          <van-field
            v-model="quotaName"
            input-align="left"
            name="title"
            label=""
            placeholder="请输入指标名称"
            maxlength="32"
            size="small"
            style="width: 180px; padding: 0 0 0 10px">
            <van-button slot="button" size="small" icon="search" type="info" @click="searchQuota" />
          </van-field>
        </div>
      </div>
      <div class="nav_wrap">
        <div v-if="query.level == 2" class="left">
          <div class="tit" style="width: 86px">辖区/负责人：</div>
          <div class="content" style="width: 110px" @click="showPersonSelect">
            <div style="max-width: 80px">{{ selectArea }}</div>
            <i class="down"></i>
          </div>
        </div>
        <div v-if="query.level == 1" class="left">
          <div class="tit" style="width: 60px">负责人：</div>
          <div class="content" @click="show = true">
            <div>{{ employName === '全部' ? '人员筛选' : employName }}</div>
            <i class="down"></i>
          </div>
        </div>
        <div class="right">
          <div class="tit" style="width: 70px">选择时间：</div>
          <div class="content" @click="showSelectDate">
            <div>{{ currentDate }}</div>
            <i class="down"></i>
          </div>
        </div>
      </div>
      <div class="person_quota" v-if="employName !== '全部'">
        <div class="left">
          <span class="tit">{{ personQuota.greenCount }}</span>
          项指标获得绿牌
        </div>
        <div class="right">
          <span class="tit">{{ personQuota.redCount }}</span>
          项指标被赋红牌
        </div>
      </div>
      <div class="showabnormal-btn">
        <van-button round type="info" @click="toAbnormal">征求意见栏</van-button>
      </div>
      <div class="quota_box">
        <pull-refresh-list ref="PullRefreshList" :limit="queryInfo.size" :page-no.sync="queryInfo.current" :data.sync="quotaList" @getList="getQuotaList">
          <div class="quota_item" v-for="item in quotaList" :key="item.quotaId" @click="toDetail(item)" :class="item.sign == '2' ? 'active' : ''">
            <div class="tit">{{ item.quotaName }}</div>
            <div class="flex">
              <div class="num">
                <div class="num1" :class="formateSignage(item.signage)">
                  {{ item.position }}
                </div>
                <div class="num2">
                  <div class="up" v-if="item.prePosition !== 0 && item.position - item.prePosition < 0">
                    <i class="icon"></i>
                    {{ item.prePosition - item.position }}
                  </div>
                  <div class="down" v-if="item.prePosition !== 0 && item.position - item.prePosition > 0">
                    <i class="icon"></i>
                    {{ item.position - item.prePosition }}
                  </div>
                  <div class="no" v-if="item.prePosition === 0 || item.position - item.prePosition === 0">- -</div>
                </div>
              </div>
              <div class="block" :class="formateSignage(item.signage)"></div>
            </div>
            <div class="inx flex-around">
              <div class="info">
                <span v-if="item.position">全市排名</span>
              </div>
              <div class="warning" v-if="item.red3Card">
                <div>连续三次被赋红牌</div>
              </div>
            </div>
            <div class="content" v-for="obj in item.dimensionArr" :key="obj.index">
              <div class="left">{{ obj.name }}</div>
              <div class="right">{{ obj.value }}</div>
            </div>
            <div class="leader" v-if="query.level != 0">
              <div class="tit">责任领导</div>
              <div class="person">
                <div v-for="p in item.empList" :key="p.index">{{ p }}</div>
              </div>
            </div>
            <div class="footer">{{ sliceDate(item.issueNo) }}</div>
          </div>
        </pull-refresh-list>
      </div>
    </div>
    <van-popup v-model="show" round position="bottom" get-container="#app">
      <van-picker show-toolbar :columns="selectList" confirm-button-text="确定" cancel-button-text="取消" @confirm="onConfirm" @cancel="cancel" />
    </van-popup>
    <van-popup v-model="dateShow" round position="bottom" get-container="#app">
      <van-picker show-toolbar :columns="issueNoList" confirm-button-text="确定" cancel-button-text="取消" @confirm="confirmDate" @cancel="cancelDate" />
    </van-popup>
    <van-popup v-model="personShow" round position="bottom" get-container="#app">
      <van-picker show-toolbar :columns="personList" confirm-button-text="确定" cancel-button-text="取消" @confirm="confirmPerson" @cancel="canclePerson" />
    </van-popup>
  </div>
</template>

<script>
import CommonHeader from '@/components/commonHeader';
import PullRefreshList from '@/components/PullRefreshList';
// import { Toast } from "vant";
export default {
  name: 'indexAsd',
  components: {
    CommonHeader,
    PullRefreshList,
  },
  data() {
    return {
      show: false,
      query: {},
      userInfo: {},
      year: '',
      month: '',
      currentDate: '全部最新',
      dateShow: false,
      queryInfo: {
        current: 1,
        size: 9999,
      },
      quotaName: '',
      quotaList: [],
      selectList: [],
      issueNoList: [],
      personShow: false,
      personList: [],
      selectArea: '鹿城区',
      employId: '',
      areaId: '',
      employName: '全部',
      personQuota: {},
      quotaNum: 0,
    };
  },
  watch: {
    areaId: {
      handler: function (val) {
        if (val) {
          setTimeout(() => {
            if (this.quotaList.length === 0) {
              this.$refs.PullRefreshList.onSearch();
              this.getInfoDetail();
            }
          }, 500);
        }
      },
      immediate: true,
    },
  },
  computed: {
    formateSignage() {
      return function (id) {
        switch (id) {
          case 0:
            return 'green';
          case 1:
            return 'red';
          default:
            return '';
        }
      };
    },
    formateName() {
      return function (name) {
        if (name) {
          return name;
        } else {
          return '';
        }
      };
    },
    sliceDate() {
      return function (date) {
        if (date) {
          const arr = date.split('-');
          return arr[0] + '-' + arr[1];
        } else {
          return '';
        }
      };
    },
    issueNoFilte() {
      return function (str) {
        if (str === '全部最新') {
          return '';
        } else {
          return str;
        }
      };
    },
    formateArea() {
      return function (area) {
        if (area) {
          let name = area.split('-')[0];
          if (name.indexOf('温州市') >= 0) {
            name = name.slice(3, name.length - 1);
          }
          return '温州市' + name;
        }
      };
    },
  },
  created() {
    this.query = this.$route.query;
    if (this.query.level == 2) {
      this.getAreaPersonList();
    } else {
      this.getInfoDetail();
    }
  },
  methods: {
    toFeedbackOk() {
      let path = '/feedback';
      if (this.query.level == 2) {
        path = 'leaderFeedback';
      }
      this.$router.push({
        path: path,
        query: {
          level: this.query.level,
          isOK: 1,
          name: this.query.name,
        },
      });
    },
    toAbnormal() {
      this.$router.push({
        path: '/lsadnormal',
        query: {
          issueNoList: this.issueNoList,
        },
      });
    },
    toDeclare() {
      // if (this.query.level == 2) {
      //   Toast.fail("该功能暂未开放！");
      //   return;
      // }
      this.$router.push({
        path: '/declare',
        query: {
          level: this.query.level,
        },
      });
    },
    toFeedback() {
      let path = '/feedback';
      if (this.query.level == 2) {
        path = 'leaderFeedback';
      }
      this.$router.push({
        path: path,
        query: {
          level: this.query.level,
          name: this.query.name,
        },
      });
    },
    toQuota(signage) {
      this.$router.push({
        path: '/quota',
        query: {
          year: this.year,
          month: this.month,
          signage: signage || '',
          level: this.query.level,
          areaId: this.areaId,
          empId: sessionStorage.getItem('employId'),
        },
      });
    },
    toRedCard() {
      this.$router.push({
        path: '/redCard',
        query: {
          empId: sessionStorage.getItem('employId'),
          year: this.year,
          month: this.month,
          level: this.query.level,
        },
      });
    },
    toDetail(data) {
      if (data.id == 611) {
        // 演示用  写死的页面
        this.$router.push({
          path: '/fanDetail',
          query: {
            ...data,
            year: this.year,
            level: this.query.level,
          },
        });
      } else {
        this.$router.push({
          path: '/QuotaDetailCharts',
          query: {
            ...data,
            year: this.year,
            level: this.query.level,
          },
        });
      }
    },
    onConfirm(params) {
      this.employId = params.value;
      this.employName = params.text;
      this.show = false;
      this.getPersonQuota();
      this.$refs.PullRefreshList.onSearch();
    },
    searchQuota() {
      this.$refs.PullRefreshList.onSearch();
    },
    cancel() {
      this.show = false;
    },
    getInfoDetail() {
      const params = {
        _gp: 'quota',
        _mt: 'empQuotaInfo',
        areaId: this.areaId || sessionStorage.getItem('areaId'),
        issueNo: this.issueNoFilte(this.currentDate),
        employId: this.query.level == 0 ? sessionStorage.getItem('employId') : '',
      };
      this.$api.commonApi(params).then((res) => {
        if (res.errno === 200) {
          this.userInfo = res.data;
          this.year = res.data.issueNo.split('-')[0];
          this.month = res.data.issueNo.split('-')[1];
          this.quotaNum = res.data.dutyCount || 0;
          this.issueNoList = ['全部最新', ...res.data.issueNoList];
          if (res.data.empList && res.data.empList.length > 0) {
            this.selectList = res.data.empList.map((item) => {
              return {
                text: item.name,
                value: item.empId,
              };
            });
            this.selectList.unshift({
              text: '全部',
              value: '',
            });
          }
        }
      });
    },
    getQuotaList(callback) {
      const params = {
        _gp: 'quota',
        _mt: 'list',
        quotaName: this.quotaName,
        areaId: this.areaId || sessionStorage.getItem('areaId'),
        employId: this.query.level == 0 ? sessionStorage.getItem('employId') : this.employId,
        issueNo: this.issueNoFilte(this.currentDate),
        page: this.queryInfo.current,
        limit: this.queryInfo.size,
      };
      this.$api.commonApi(params).then((res) => {
        if (res.errno === 200) {
          const rows = res.data.items.map((item) => {
            // 处理dimension数据
            let dimensionArr = [];
            if (item.dimension) {
              const dimension = item.dimension.slice(1, -2);
              const arr = dimension.split(',');
              for (let i in arr) {
                let obj = {
                  name: arr[i].split(':')[0].split('"')[1],
                  value: arr[i].split(':')[1].split('"')[1],
                };
                dimensionArr.push(obj);
              }
            }
            return {
              ...item,
              dimensionArr,
            };
          });
          if (callback) callback(rows);
        } else {
          callback([]);
        }
      });
    },
    getPersonQuota() {
      const params = {
        _gp: 'quota',
        _mt: 'trendDetails',
        employId: this.employId,
        issueNo: this.issueNoFilte(this.currentDate),
      };
      this.$api.commonApi(params).then((res) => {
        if (res.errno === 200) {
          this.personQuota = res.data[0];
        }
      });
    },
    showSelectDate() {
      this.dateShow = true;
    },
    showPersonSelect() {
      this.personShow = true;
    },
    confirmDate(params) {
      this.currentDate = params;
      this.dateShow = false;
      this.getPersonQuota();
      this.getInfoDetail();
      this.$refs.PullRefreshList.onSearch();
    },
    cancelDate() {
      this.dateShow = false;
    },
    getAreaPersonList() {
      const params = {
        _gp: 'employee',
        _mt: 'getEmpByArea',
      };
      this.$api.commonApi(params).then((res) => {
        if (res.errno == 200) {
          this.personList = res.data.map((item) => {
            const arr = item.employeeDOList.map((desc) => {
              return {
                value: desc.empId,
                text: desc.name,
              };
            });
            return {
              value: item.areaId,
              text: item.areaName,
              children: [
                {
                  text: '全部',
                  value: '',
                },
                ...arr,
              ],
            };
          });
          this.areaId = this.personList[0].value;
        }
      });
    },
    confirmPerson(params, inx) {
      this.areaId = this.personList[inx[0]].value;
      this.employId = this.personList[inx[0]].children[inx[1]].value;
      if (params[1] == '全部') {
        this.selectArea = params[0];
        this.employName = '全部';
      } else {
        this.selectArea = params[0] + '-' + params[1];
        this.employName = params[1];
      }
      this.personShow = false;
      this.getPersonQuota();
      this.getInfoDetail();
      this.$refs.PullRefreshList.onSearch();
    },
    canclePerson() {
      this.personShow = false;
    },
  },
};
</script>

<style scoped>
.main_box {
  min-height: 100vh;
  background-color: #f4f5fa;
}
.main_content {
  padding: 10px 15px;
  box-sizing: border-box;
  text-align: left;
  background-color: #f4f5fa;
}
.info_card {
  width: 100%;
  padding: 10px;
  background: url('../assets/image/bg.png') no-repeat;
  background-size: cover;
  object-fit: fill;
  box-sizing: border-box;
  border-radius: 8px;
  color: #b5d0ff;
  font-size: 13px;
}
.info_card .bold {
  font-weight: bold;
}
.info_card .undeline {
  color: #fff;
  text-decoration: underline;
}
.info_card .tit {
  display: flex;
  justify-content: space-between;
  color: #fff;
  font-size: 14px;
  margin-bottom: 10px;
}
.info_card .tit .name {
  font-size: 16px;
  font-weight: bold;
}
.info_card .info {
  height: 30px;
}
.info_card .content {
  display: flex;
  justify-content: space-between;
}
.info_card .content .left div {
  margin-bottom: 5px;
}
.info_card .content .right {
  padding-top: 42px;
}
.info_card .card {
  display: inline-block;
  width: 8px;
  height: 10px;
  border: 1px solid #fff;
  background-color: #5bc55a;
  position: relative;
  top: 2px;
}
.info_card .card.red {
  background-color: #e43c26;
}
.info_card .card_prev {
  display: inline-block;
  /* width: 116px; */
}
.nav_box {
  display: flex;
  justify-content: space-between;
  font-size: 13px;
  color: #666;
  margin-top: 20px;
  text-align: center;
}
.nav_item,
.nav_item * {
  cursor: pointer;
}
.nav_item {
  position: relative;
}
.nav_item .tips {
  width: 16px;
  height: 16px;
  line-height: 16px;
  background-color: #f60e36;
  border-radius: 50%;
  border: 2px solid #fff;
  color: #fff;
  font-size: 11px;
  position: absolute;
  top: -6px;
  left: 50%;
  margin-left: 8px;
}
.nav_item .icon {
  display: inline-block;
  width: 42px;
  height: 42px;
  background: url('../assets/image/declare.png') no-repeat;
  background-size: 100% 100%;
  margin-bottom: 5px;
}
.nav_item .icon.nav2 {
  background: url('../assets/image/feedback.png') no-repeat;
  background-size: 100% 100%;
}
.nav_item .icon.nav3 {
  background: url('../assets/image/quota.png') no-repeat;
  background-size: 100% 100%;
}
.nav_item .icon.nav4 {
  background: url('../assets/image/redCard.png') no-repeat;
  background-size: 100% 100%;
}
.common_title {
  margin-top: 15px;
}
.common_title .tit {
  font-size: 16px;
  color: #333;
  font-weight: bold;
  margin-right: 10px;
}
.common_title .tips {
  font-size: 12px;
  color: #ccc;
  padding-top: 3px;
}
.common_title .select {
  color: #367fff;
  font-size: 12px;
  position: relative;
  padding-right: 13px;
  height: 22px;
  line-height: 22px;
}
.common_title .select::after {
  content: ' ';
  display: inline-block;
  height: 6px;
  width: 6px;
  border-width: 1px 1px 0 0;
  border-color: #367fff;
  border-style: solid;
  -webkit-transform: matrix(0.71, 0.71, -0.71, 0.71, 0, 0);
  transform: matrix(0.71, 0.71, -0.71, 0.71, 0, 0);
  position: absolute;
  top: 7px;
  right: 5px;
}
.nav_wrap {
  width: 100%;
  display: flex;
  margin-top: 10px;
  margin-bottom: 15px;
}
.nav_wrap > div {
  display: flex;
}
.nav_wrap .tit {
  font-size: 13px;
  color: #999;
}
.nav_wrap .content {
  width: 94px;
  font-size: 13px;
  color: #333;
  display: flex;
  line-height: 18px;
}
.nav_wrap .content .down {
  width: 15px;
  height: 8px;
  background: url('../assets/image/down.png') no-repeat;
  background-size: 100% 100%;
  position: relative;
  left: 10px;
  top: 5px;
}
.person_quota {
  width: 100%;
  padding: 10px 15px;
  background-color: #fff;
  border-radius: 5px;
  display: flex;
  justify-content: space-between;
  font-size: 14px;
  color: #e43c26;
  box-sizing: border-box;
}
.person_quota .left {
  color: #5bc55a;
}
.person_quota .tit {
  font-weight: bold;
  font-size: 16px;
}
.quota_box {
  margin-top: 15px;
}
.quota_box >>> .van-list {
  display: flex;
  flex-wrap: wrap;
}
.quota_box >>> .van-list__finished-text,
.quota_box >>> .van-list__loading {
  width: 100%;
  margin: 0 auto;
  font-size: 14px;
}
.quota_box .quota_item {
  width: 48%;
  background-color: #fff;
  border-radius: 10px;
  box-sizing: border-box;
  margin-bottom: 15px;
  font-size: 14px;
  padding: 10px;
  color: #333;
}
.quota_box .quota_item.active {
  background-color: #fafafa;
}
.quota_box .quota_item:nth-child(2n + 1) {
  margin-right: 4%;
}
.quota_box .quota_item > .tit {
  font-weight: bold;
}
.quota_box .quota_item .num {
  display: flex;
  margin-top: 10px;
}
.quota_item .num .num1 {
  font-size: 32px;
  color: #4ca5f1;
  font-weight: bold;
  margin-right: 10px;
}
.quota_item .num .num1.red {
  color: #e43c26;
}
.quota_item .num .num1.green {
  color: #5bc55a;
}
.quota_item .num .num2 .no {
  font-size: 14px;
  color: #bcc0c7;
  padding-top: 10px;
}
.quota_item .num .num2 .down {
  font-size: 14px;
  color: #e43c26;
  padding-top: 14px;
}
.quota_item .num .num2 .down .icon {
  display: inline-block;
  width: 10px;
  height: 13px;
  background: url('../assets/image/arrow_down.png') no-repeat;
  background-size: 100% 100%;
  position: relative;
  top: 2px;
  margin-right: 5px;
}
.quota_item .num .num2 .up {
  font-size: 14px;
  color: #5bc55a;
  padding-top: 14px;
}
.quota_item .num .num2 .up .icon {
  display: inline-block;
  width: 10px;
  height: 13px;
  background: url('../assets/image/arrow_up.png') no-repeat;
  background-size: 100% 100%;
  position: relative;
  top: 2px;
  margin-right: 5px;
}
.quota_box .inx {
  font-size: 12px;
  color: #bdc0c7;
  margin-top: 5px;
}
.quota_box .inx .info {
  width: 90px;
  margin-bottom: 5px;
  height: 22px;
  line-height: 22px;
}
.quota_box .inx .warning {
  width: 90px;
  font-size: 12px;
  text-align: center;
  background-color: #fedae0;
  color: #f60e36;
  border-radius: 5px;
  height: 22px;
  line-height: 22px;
}
.quota_box .inx .warning div {
  font-size: 20px;
  white-space: nowrap;
  -webkit-transform-origin-x: 0;
  -webkit-transform: scale(0.5);
  margin-left: 4px;
}
.quota_box .content,
.quota_box .leader {
  display: flex;
  justify-content: space-between;
  font-size: 13px;
  color: #a3a7ad;
  margin-top: 5px;
}
.quota_box .leader .tit {
  width: 120px;
}
.quota_box .leader .person {
  width: 120px;
  text-align: right;
}
.flex {
  display: flex;
  justify-content: space-between;
}
.block {
  width: 30px;
  height: 31px;
  background: url('../assets/image/blue_card.png') no-repeat;
  background-size: 100% 100%;
  margin-top: 12px;
}
.block.red {
  background: url('../assets/image/red_card.png') no-repeat;
  background-size: 100% 100%;
}
.block.green {
  background: url('../assets/image/green_card.png') no-repeat;
  background-size: 100% 100%;
}
.quota_item .footer {
  width: 100%;
  text-align: right;
  font-size: 12px;
  color: #a3a7ad;
  margin-top: 10px;
}
.showabnormal-btn {
  width: 100%;
  padding: 20px 10px;
  position: fixed;
  bottom: 20px;
  left: 0;
  z-index: 99;
  cursor: pointer;
  box-sizing: border-box;
}
.showabnormal-btn >>> .van-button {
  width: 100%;
  box-sizing: border-box;
}
.quota_tip {
  margin-top: 10px;
  padding: 10px;
  display: flex;
  align-items: center;
  background-color: #fff;
  border-radius: 5px;
  color: #000;
}
.quota_tip .quota_tip_title {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  font-size: 14px;
  font-weight: 400;
  color: #000;
  line-height: 20px;
  white-space: nowrap;
}
.quota_tip .quota_tip_title::before {
  content: '';
  margin-right: 10px;
  display: inline-block;
  width: 4px;
  height: 20px;
  background-color: #39a3ef;
  border-radius: 2px;
}
.quota_tip .quota_tip_underline {
  width: 1px;
  height: 16px;
  background-color: #d3d1d4;
}
.quota_tip .quota_tip_sec {
  margin: 0 20px;
  display: flex;
  align-items: center;
  font-size: 14px;
  color: #dad7da;
  line-height: 20px;
}
.quota_tip .quota_tip_sec img {
  width: 24px;
  height: 24px;
}
.quota_tip .quota_tip_sec .tit {
  margin: 0 10px;
  display: block;
  font-size: 16px;
  font-weight: 600;
  line-height: 20px;
}
.quota_tip .quota_tip_sec .down {
  margin-left: 10px;
  display: flex;
  font-size: 14px;
  color: #e43c26;
  line-height: 20px;
}
.quota_tip .quota_tip_sec .down .icon {
  display: inline-block;
  width: 10px;
  height: 13px;
  background: url('../assets/image/arrow_down.png') no-repeat;
  background-size: 100% 100%;
  position: relative;
  top: 2px;
  margin-right: 5px;
}
.quota_tip .quota_tip_sec .up {
  margin-left: 10px;
  display: flex;
  font-size: 14px;
  color: #5bc55a;
  line-height: 20px;
}
.quota_tip .quota_tip_sec .icon {
  display: inline-block;
  width: 10px;
  height: 13px;
  background: url('../assets/image/arrow_up.png') no-repeat;
  background-size: 100% 100%;
  position: relative;
  top: 2px;
  margin-right: 5px;
}
</style>
